<template>
  <div class="goodsWrap" >
    <!-- <div v-if="showCarInfo" class="messageBox" :style="{left: (moveGoods.left<50?80:moveGoods.left)+'px', top: moveGoods.top+'px'}">
      <span>{{'设备状态：'+ (moveGoods.x)}}</span>
      <span>{{'故障信息：'+ (moveGoods.y)}}</span>
    </div>
    <div class="carBox"  :style="{left: moveGoods?.left+'px', top: moveGoods?.top+'px'}" @click="handleCar($event)" v-show="moveGoods.left">
      <img v-if="!moveGoods.havingGoods" src="@/assets/images/fourPosiCar.png" alt="" >
      <img v-else src="@/assets/images/car_cargo.png" alt="" >
      <img v-if="moveGoods.workStatus" class="warnImg" src="@/assets/images/icon_caution.png" alt="">
    </div> -->
    <div 
      class="goodItem" 
      v-for="(good, index) in moveGoods" 
      :key="good+index"
      :ref="index+'Ref'"
      :style="{
        display: ((good && good.haveGood)? 'block':'none'),
        left: handleTransformLeft(good), 
        top: handleTransformTop(good)
      }"
      >
      {{index}}
      <!-- 货 -->
    </div>
  </div>
</template>

<script>
export default {
  props: ['moveGoods', 'locationScaleX', 'locationScaleY'],
  data() {
    return {
      showCarInfo: false,
    }
  },
  watch: {
    'moveGoods.L1': {
      handler(newV, oldV) {
        if(newV && newV.haveGood) {
          switch (newV.isZhengxiang) {
            case 0:
              setTimeout(() => {
                this.$refs.L1Ref[0].style.top = newV.endY * this.locationScaleX - 13 + 'px'
              }, 0);
              break;
            case 1:
              setTimeout(() => {
                this.$refs.L1Ref[0].style.top = newV.startY * this.locationScaleX - 13 + 'px'
              }, 0);
              break; 
            default:
              break;
          }
        }
      },
      deep: true
    },
    'moveGoods.L2': {
      handler(newV, oldV) {
        if(newV && newV.haveGood) {
          switch (newV.isZhengxiang) {
            case 0:
              setTimeout(() => {
                this.$refs.L2Ref[0].style.top = newV.endY * this.locationScaleX - 13 + 'px'
              }, 0);
              break;
            case 1:
              setTimeout(() => {
                this.$refs.L2Ref[0].style.top = newV.startY * this.locationScaleX - 13 + 'px'
              }, 0);
              break; 
            default:
              break;
          }
        }
      },
      deep: true
    },
    
    'moveGoods.L4': {
      handler(newV, oldV) {
        if(newV && newV.haveGood) {
          switch (newV.isZhengxiang) {
            case 0:
              setTimeout(() => {
                this.$refs.L4Ref[0].style.top = newV.endY * this.locationScaleX - 13 + 'px'
              }, 0);
              break;
            case 1:
              setTimeout(() => {
                this.$refs.L4Ref[0].style.top = newV.startY * this.locationScaleX - 13 + 'px'
              }, 0);
              break; 
            default:
              break;
          }
        }
      },
      deep: true
    },
    
    'moveGoods.L102': {
      handler(newV, oldV) {
        if(newV && newV.haveGood) {
          switch (newV.isZhengxiang) {
            case 0:
              setTimeout(() => {
                this.$refs.L102Ref[0].style.top = newV.end0Y * this.locationScaleX - 13 + 'px'
              }, 100);
              break;
            case 1:
              setTimeout(() => {
                this.$refs.L102Ref[0].style.top = newV.end1Y * this.locationScaleX - 13 + 'px'
              }, 100);
              break; 
            default:
              break;
          }
        }
      },
      deep: true
    },
    'moveGoods.L101': {
      handler(newV, oldV) {
        if(newV && newV.haveGood) {
          switch (newV.isZhengxiang) {
            case 0:
              setTimeout(() => {
                this.$refs.L101Ref[0].style.top = newV.end0Y * this.locationScaleX - 13 + 'px'
              }, 100);
              break;
            case 1:
              setTimeout(() => {
                this.$refs.L101Ref[0].style.top = newV.end1Y * this.locationScaleX - 13 + 'px'
              }, 100);
              break; 
            default:
              break;
          }
        }
      },
      deep: true
    },
    'moveGoods.L3': {
      handler(newV, oldV) {
        if(newV && newV.haveGood) {
          switch (newV.isZhengxiang) {
            case 0:
              setTimeout(() => {
                this.$refs.L3Ref[0].style.top = newV.end0Y * this.locationScaleX - 13 + 'px'
              }, 100);
              break;
            case 1:
              setTimeout(() => {
                this.$refs.L3Ref[0].style.top = newV.end1Y * this.locationScaleX - 13 + 'px'
              }, 100);
              break; 
            default:
              break;
          }
        }
      },
      deep: true
    },
    'moveGoods.L5': {
      handler(newV, oldV) {
        console.log(newV)
        if(newV && newV.haveGood) {
          switch (newV.isZhengxiang) {
            case 0:
              setTimeout(() => {
                this.$refs.L5Ref[0].style.top = newV.end0X * this.locationScaleX - 13 + 'px'
              }, 100);
              break;
            case 1:
              setTimeout(() => {
                this.$refs.L5Ref[0].style.top = newV.end1Y * this.locationScaleX - 13 + 'px'
              }, 100);
              break; 
            default:
              break;
          }
        }
      },
      deep: true
    },
  },
  mounted() {
    // console.log(this.moveGoods.get('L1').startX)
  },
  methods: { //startX  endX  startY endY
    handleTransformLeft(data) {
      if(data) {
        let { isZhengxiang, startX, endX, midX } = data
        let rtn = 0
        // switch (isZhengxiang) {
        //   case 0: //反
        //     rtn = startX * this.locationScaleY - 21 
        //     break;
        //   case 1: //正
        //     rtn = endX * this.locationScaleY - 21 
        //     break;
        //   case 2: //
        //     rtn = midX * this.locationScaleY - 21 
        //     break;
        //   default:
        //     break;
        // }
        // return rtn + 'px'
        return (startX * this.locationScaleY - 21) +'px'

      }
    },
    handleTransformTop(data) {
      if(data) {
        let { isZhengxiang, startY, endY, midY } = data
        let rtn = 0
        // switch (isZhengxiang) {
        //   case 0: //反
        //     rtn = startY * this.locationScaleY - 6 
        //     break;
        //   case 1: //正
        //     rtn = endY * this.locationScaleY - 6 
        //     break;
        //   case 2: //
        //     rtn = midY * this.locationScaleY - 6 
        //     break;
        //   default:
        //     break;
        // }
        // return rtn + 'px'
        return (startY * this.locationScaleY - 6) +'px'
      }
    },
    handleCar() {
      this.showCarInfo = !this.showCarInfo
      if(this.showCarInfo) {
        this.messageInfo = {...this.moveGoods}
      }else {
        this.messageInfo.left = 0
      }
    },
    
  }
}
</script>

<style lang="scss" scoped>
.goodsWrap{
  pointer-events: none;
  position: relative;
  // background: rgba($color: #000000, $alpha: 0.5);
  .goodItem{
    pointer-events: auto;
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    text-align: center;
    font-size: 16px;
    line-height: 44px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    background: #F7B500;
    font-size: 18px;
    // cursor: pointer;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    transition-property: top, left;
    transition-duration: 5s, 5s;
    // transition-property: left top; /* 定义过渡的属性 */
    // transition-duration: 1.2s 1.2s; /* 定义每个属性变化的持续时间 */
    // transition-delay: 0s 0s; /* 定义每个属性开始变化的延迟 */
   
  }
  // .messageBox{
  //   width: 280px;
  //   height: 100px;
  //   background: rgba(0,19,102,0.9);
  //   box-shadow: inset 0px 1px 30px 0px #44D7B6;
  //   border-radius: 16px;
  //   border: 1px solid #44D7B6;
  //   position: absolute;
  //   z-index: 111;
  //   padding-left: 20px;
  //   justify-content: center;
  //   display: flex;
  //   flex-direction: column;
  //   transform: translate(-30%, -100%);
  //   span{
  //     margin-bottom: 5px;
  //     color: #fff;
  //     font-size: 14px;
  //   }
  // }
}
</style>